<template>
<div>
     <div class="head">
         <span>{{this.$route.params.name}}</span>
        <div class="fanhui" @click="fanhui_btu()">
        <i class="el-icon-arrow-left"></i>
      </div>
     </div>
       <div class="zhong">
      <div class="kuang">
        <div class="fuxuan">
        </div>
        <div class="list" v-for="(item, index) in list" :key="index">
          <div class="zuo">
            <div class="xuanze">
            </div>
            <div class="tu">
              <el-image
                style="width:100px; height: 90px"
                :src="item.img"
                :fit="fit"
              ></el-image>
            </div>
          </div>
          <div class="you">
            <div class="y_shang">{{ item.name }}</div>
            <div class="y_zhong" style="color:red;">{{item.money}}元</div>
            <div class="y_xia">
                <div>
                {{item.gongsi}}
              </div>
              <div class="yx_you"><i class="el-icon-shopping-cart-1"></i></div>
              </div>
          </div>
        </div>
      </div>
    </div>
        <div class="yun">
      <van-tabbar v-model="active" route>
        <van-tabbar-item name="首页" icon="home-o" replace to="/zhuye"
          >首页</van-tabbar-item
        >
        <van-tabbar-item name="找药" icon="search" replace to="/zhaoyao"
          >找药</van-tabbar-item
        >
        <van-tabbar-item
          name="购物车"
          icon="shopping-cart-o"
          replace
          to="/shopping"
          >购物车</van-tabbar-item
        >
        <van-tabbar-item name="我的" icon="user-o" replace to="/wode"
          >我的</van-tabbar-item
        >
      </van-tabbar>
    </div>
</div>
</template>
<script>
export default {
    name:"fenlei2",
    data(){
        return{
              list:[],
                 fit: "cover",
                  active: "首页",
        }
    },
    mounted (){
         console.log(111)
      this.axios({
      method: "post",
      url: "http://localhost:3000/fenlei3",
      data:{
          id2:this.$route.params.id2
      }
    })
      .then((res) => {
        console.log(res)
       this.list= res.data.data
      })
      .catch((error) => {
        console.log(error);
      })
    },
     methods: {
    fanhui_btu() {
      this.$router.go(-1);
    },
    }
}
</script>
<style  scoped>
   .head{
       width: 99%;
       height: 50px;
       background-color: rgb(1, 154, 254);
       text-align: center;
       line-height: 50px;
       color: white;
       font-size: 23px;
       font-weight: bold;
       position: relative;
   }
   .fanhui{
  position:absolute ;
  width: 50px;
  height: 50px;
}
   .zhong {
  margin-top: 10px;
  width: 100%;
  display: flex;
  justify-content: space-around;
}
.kuang {
  padding-top: 10px;
  width: 95%;
  border-radius: 5px 5px;
}
.list {
  display: flex;
  height: 100px;
  padding-top: 5px;
  padding-bottom: 5px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.zuo {
  flex: 1;
  display: flex;
}
.you {
  flex: 3;

  display: flex;
  flex-direction: column;
}
.xuanze {
  top: 0;
  bottom: 0;
  margin: auto;
}
.tu {
  flex: 1;
}
.y_zhong{
  flex: 1;
}
.y_shang {
  flex: 1;
}
.y_xia {
  flex: 1;
  display: flex;
}
.yx_zuo {
  flex: 1;
}
.yx_you {
  flex: 1;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  text-align: center;
  color: red;
  line-height: 30px;
  font-size: 17px;
}
.yun {
  position: fixed;
  bottom: 0px;
  z-index: 3;
}
</style>